<template>
  <el-dialog v-el-drag-dialog title="价格管理" :visible.sync="visible" :append-to-body="appendToBody" :before-close="onClose">
    <el-card style="margin:0 0 5px 5px">
      <el-row>
        <el-form v-model="skuInfo">
          <el-col :span="24">
            <el-form-item label="设置价格">
              <el-input-number v-model="skuInfo.price" :precision="2" :min="0" controls-position="right" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="设置折扣">
              <label>满</label>
              <el-input-number
                style="width:160px"
                v-model="skuInfo.fullCount"
                :min="0"
                controls-position="right"
              />
              <label>件</label>
              <label style="margin-left:15px;">打</label>
              <el-input-number
                style="width:160px"
                v-model="skuInfo.discount"
                :precision="2"
                :max="1"
                :min="0"
                :step="0.01"
                controls-position="right"
              />
              <label class="m-r-10">折</label>
              <el-checkbox
                v-model="skuInfo.countStatus"
                true-label="0"
                false-label="1"
              >可叠加折扣</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="设置满减">
              <label>满</label>
              <el-input-number
                style="width:160px"
                v-model="skuInfo.fullPrice"
                :step="100"
                :min="0"
                controls-position="right"
              />
              <label>元</label>
              <label style="margin-left:15px;">减</label>
              <el-input-number
                style="width:160px"
                v-model="skuInfo.reducePrice"
                :step="10"
                :min="0"
                controls-position="right"
              />
              <label class="m-r-10">元</label>
              <el-checkbox
                v-model="skuInfo.priceStatus"
                true-label="0"
                false-label="1"
              >可叠加满减优惠</el-checkbox>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="设置会员价" v-if="skuInfo.memberPrice.length>0">
              <br>
              <el-form-item class="m-b-10 m-l-20" v-for="(memberLevel, m_index) in skuInfo.memberPrice" :key="memberLevel.id">
                {{ memberLevel.name }}
                <el-input-number
                  style="width:160px"
                  v-model="skuInfo.memberPrice[m_index].price"
                  :precision="2"
                  :min="0"
                  controls-position="right"
                />
              </el-form-item>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </el-card>
    <span slot="footer" class="dialog-footer">
      <el-button v-if="hasLoaded" type="primary" icon="el-icon-check" @click="onSubmit">确 定</el-button>
      <el-button icon="el-icon-close" @click="onClose">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { skuPrice, skuSavePrice } from '@/api/mall/product/sku'

export default {
  name: 'SkuPriceDialog',
  data() {
    return {
      visible: false,
      appendToBody: false,
      hasLoaded: false,
      skuInfo: {
        skuId: undefined,
        price: undefined,
        fullCount: undefined,
        discount: undefined,
        countStatus: undefined,
        fullPrice: undefined,
        reducePrice: undefined,
        priceStatus: undefined,
        memberPrice: []
      }
    }
  },
  methods: {
    init(skuId) {
      this.hasLoaded = false
      this.skuInfo.skuId = skuId
      this.visible = true
      this.$nextTick(() => {
        this.getPrice()
        this.hasLoaded = this.$perm.hasPermissionOr(['mall:product:edit'])
      })
    },
    getImageSrc(key) {
      return this.$api.getImageSrc(key)
    },
    getPrice() {
      skuPrice(this.skuInfo.skuId).then(response => {
        this.skuInfo = response.param
      })
    },
    onSubmit() {
      skuSavePrice(this.skuInfo.skuId, this.skuInfo).then(response => {
        this.$modal.msgSuccess(response.msg)
        this.$emit('confirmForm')
        this.skuInfo = {
          skuId: undefined,
          price: undefined,
          fullCount: undefined,
          discount: undefined,
          countStatus: undefined,
          fullPrice: undefined,
          reducePrice: undefined,
          priceStatus: undefined,
          memberPrice: []
        }
        this.visible = false
      }).catch(() => {})
    },
    onClose() {
      this.skuInfo = {
        skuId: undefined,
        price: undefined,
        fullCount: undefined,
        discount: undefined,
        countStatus: undefined,
        fullPrice: undefined,
        reducePrice: undefined,
        priceStatus: undefined,
        memberPrice: []
      }
      this.visible = false
    }
  }
}
</script>
